<extend name="Public/base" />

<block name="body">
    <form method="POST" id="form1" action="">
        <!-- 标题栏 -->
        <div class="main-title">
            <h2>
                {$title}
                <a href="{:U('areaExport')}&start_date={$start_date}&end_date={$end_date}" class="btn confirm btn-default">数据导出</a>
            </h2>
        </div>
        <div class="navbar navbar-default" style="margin: 0px;">
            <!-- 高级搜索 -->
            <div class="search-form " style="margin-top: 10px;margin-left: 10px;">
                <div class="sleft">
                   日期：
                   <input type="text" name="start_date" class="text input-large time" value="{$start_date}" placeholder="默认当天"   style="height: 30px;width:120px" />
                   到：
                   <input type="text" name="end_date" class="text input-large time" value="{$end_date}" placeholder=""   style="height: 30px;width:120px" />
                </div>
                <div class="sleft">
                    <a class="sch-btn" href="javascript:;" id="search" url="{:U('')}"><i class="btn-search"></i></a>
                </div>
            </div>
        </div>
        <div class="data-table table-striped">
            <div class="fl">
                <label>地区销售数据图
                    <canvas id="myChart"   style="width: 80%;height: 260px;"></canvas>
                </label>
            </div>
            <div class="fl">
                <label>地区退货数据图
                    <canvas id="rejectChart"   style="width: 30%;height: 80px;"></canvas>
                </label>
            </div>
            <div style="">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>地区</th>
                            <th>颜色</th>
                            <th>成交额</th>
                            <th>退换货</th>
                        </tr>
                    </thead>
                    <volist name="_list" id="vo">
                        <tr>
                            <td>{$vo.toCity}</td>
                            <td id="data{$i}">▃▃▃</td>
                            <td>{$vo.totalAmount}</td>
                            <td>{$vo.totalreject|number_format}</td>
                        </tr>
                    </volist>
                </table>

            </div>
        </div>
        <!-- 数据列表 -->
        <div class="data-table table-striped">
            <table class="table table-hover">
                <thead>
                    <tr>

                    </tr>
                </thead>
                <tbody>
                <notempty name="_list">
                </notempty>
            </table>
        </div>
        <div class="page">
            {$_page}
        </div>
    </form>
</block>

<block name="script">
    <script type="text/javascript" src="__JS__/Chart.min.js"></script>
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
    <link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
    <php>if(C('COLOR_STYLE')=='blue_color') echo '<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php>
    <link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript">
        //搜索功能
        $("#search").click(function () {
            var url = $(this).attr('url');

            var query = $('.search-form').find('input').serialize();
            var queryselect = $('.search-form').find('select').serialize();

            query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
            query = query.replace(/^&/g, '');
            queryselect = queryselect.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
            queryselect = queryselect.replace(/^&/g, '');

            if (url.indexOf('?') > 0) {
                url += '&' + query;
                url += '&' + queryselect;
            } else {
                url += '?' + query;
                url += '?' + queryselect;
            }

            window.location.href = url;
        });
        //回车搜索
        $(".search-input").keyup(function (e) {
            if (e.keyCode === 13) {
                $("#search").click();
                return false;
            }
        });
        //导航高亮
        highlight_subnav('{:U('Report/areasale')}');
        
        $(function () {
            $('.time').datetimepicker({
                format: 'yyyy-mm-dd',
                language: "zh-CN",
                minView: 2,
                autoclose: true
            });
        });
        
        function export1(){
            var url = "{:U('Report/dailyExport')}";
            $("#form1").attr("action", url).submit();
        }

        var areaObj={$list};
        var colorArr=['#CD2626','#00CD00','#1E90FF','#EEC900','#EE6363','#7EC0EE'];
        var dataArr=[];
        var RejectArr=[];
        for(var i=0;i<areaObj.length;i++){
            $("#"+"data"+String(i+1)).css('color',colorArr[i]);
            var obj={
                value:areaObj[i]['totalAmount'],
                color:colorArr[i]
            }
            var rejectObj={
                value:areaObj[i]['totalreject'],
                color:colorArr[i]
            }
            dataArr.push(obj);
            RejectArr.push(rejectObj);
        }
        var ctx = document.getElementById("myChart").getContext("2d");
        var ctx2 = document.getElementById("rejectChart").getContext("2d");
        var myNewChart = new Chart(ctx).Pie(dataArr);
        var myNewChart = new Chart(ctx2).Pie(RejectArr);
    </script>
</block>
